<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .current{
            background: yellow;
        }
    </style>
</head>
<body>
    <!--
			
			假设现在从后台接受了一段关于访客的信息数据(添加新的访客信息从info里面按照顺序拿取),请实现问题一.gif的效果.
			
		-->
		<button class="add">添加一条新的访客信息</button>
		<button class="del">删除选中</button>
		<button class="sort">从小到大</button>
		<button class="all_in">一键选中</button>
		<button class="all_no">一键反选</button>
		<button class="sort_no">从大到小</button>
		<table border="1" cellspacing="0" cellpadding="10">
			<theader>
				<tr>
					<th>序列号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>操作</th>
					<th>选择</th>
				</tr>
			</theader>

			<tfooter>
				
			</tfooter>
		</table>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script>
        var info = [
					{ name: "胡杭", age: 16 },
					{ name: "胜明", age: 22 },
					{ name: "军毅", age: 21 },
					{ name: "晓华", age: 13 },
					{ name: "盛聪", age: 23 },
					{ name: "侦剑", age: 32 },
					{ name: "红翔", age: 25 },
					{ name: "超维", age: 18 },
					{ name: "士琪", age: 22 },
					{ name: "艳华", age: 20 }
				];
        var i = 0;

       $(".add").click(function(){
           var new_tr = $("<tr><td>"+(i+1)+"</td>"+"<td>"+info[i].name+"</td>"+"<td>"+info[i].age+"</td>"+"<td><button class='r_this'>删除</button></td>"+"<td><input type='checkbox' /></td></tr>");
           new_tr.find("button.r_this").click(function(){
                $(this).parent("td").parent("tr").remove();
           })
           new_tr.find("input:checkbox").click(function(){
            $(this).parent("td").parent("tr").toggleClass("current");
           })
            $("tbody").append(new_tr);

            i++;
            i = i>info.length-1?0:i;
       })

       $(".del").click(function(){
           $("tr.current").remove();
       })

       $(".sort").click(function(){
           sort_age("tr",1,2);
       })

       $(".sort_no").click(function(){
            sort_age("tr",2,1);
       })

       $(".all_in").click(function(){
           checked_inp(true);

       })

       $(".all_no").click(function(){
           checked_inp(false);
       })

    function sort_age(ele,n1,n2){
        var tr_arr = $(ele).eq(0).siblings();
        var new_arr = [];
           for(var i = 0;i<tr_arr.length;i++){
               new_arr.push(tr_arr[i]);
           }
           if(n1<n2){
                new_arr.sort(function(a,b){
                        return a.cells[2].innerText - b.cells[2].innerText;
                })
           }
           else{
                new_arr.sort(function(a,b){
                        return b.cells[2].innerText - a.cells[2].innerText;
                })
           }
           for(var i = 0;i<new_arr.length;i++){
               $("tbody").append($(new_arr[i]));
           }
    }

    function checked_inp(bool){
        var tr = $("tr").eq(0).siblings();
        if(bool){
            tr.addClass("current");
        }
        else{
            tr.removeClass("current");
        }
        for(var i = 0;i<tr.length;i++){
            tr.eq(i).find("input:checkbox").prop("checked",bool);
        }
    }
    </script>
</body>
</html>